<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>OC与JS互调</title>
    <style type="text/css">
        button{
            width:  7rem;
            height:   3.066667rem;
            margin: 2rem 1rem 0;
            border: 1px solid #000;
        }
    </style>
    <script language="javascript">
        function loadURL(url) {
            var iFrame;
            iFrame = document.createElement("iframe");
            iFrame.setAttribute("src", url);
            iFrame.setAttribute("style", "display:none;");
            iFrame.setAttribute("height", "0px");
            iFrame.setAttribute("width", "0px");
            iFrame.setAttribute("frameborder", "0");
            document.body.appendChild(iFrame);
            // 发起请求后这个iFrame就没用了，所以把它从dom上移除掉
            iFrame.parentNode.removeChild(iFrame);
            iFrame = null;
        }
        var name = "Damon"
        var nameOld = "";
        var webSite = "Hello World"
        function changeName(nameStr) {
            name = nameStr;
            jsClick();
        }
        function jsClick() {
            alert("firstAction://shareClick?title="+name+"&content="+webSite);
            loadURL("firstAction://shareClick?title="+name+"&content="+webSite);
            if (nameOld != name) {
                alert(name);
                nameOld = name;
            }
        }
    function editInfoClick() {
        window.webkit.messageHandlers.Edit.postMessage(null);
    }
    </script>
</head>
<body>
    <button type="button" onclick="editInfoClick()">OC调用JS</button>
    <button type="button" onclick="jsClick()">JS调用OC</button>
    <input type="button" name="JS调用OC" value="JS调用OC" onclick="jsClick()">
</body>
</html>

